<!DOCTYPE html>
<html>

<head>
    <include file="Share:meta" />
    <script type="text/javascript" src="../Public/Lib/plugins/Vue/vue.js"></script>
    <style type="text/css">
    .style01{ border-top: 1px solid #d0d0d0; clear: both; padding: 5px; min-height: 40px;}
    .style01:first-child{ border:0px; }
    .style02{ background-color: #eaeaea; clear: both; padding: 8px; min-height: 40px; margin-top: 1px;}
    .style02>div,.style01>div{ min-height: 40px; }
    .style03{  background-color: #dcdcdc; clear: both; padding: 8px; min-height: 40px; margin-top: 1px; }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <include file="Share:header" />
        <include file="Share:left" />
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>顾客关系<small><a target="_blank"></a></small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                    <li class="active">顾客关系</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">列表</h3>
                        <div class="box-tools">
                            <div class="input-group input-group-sm" style="width: 450px;">
                                <select name="key" v-model="uid" id="keyinput" class="form-control" required="required" style="width:500px; float: right;">
                                    <volist name="ulist" id="vo">
                                        <option value="{$vo.uid}">{$vo.username}/{$vo.name}</option>
                                    </volist>
                                </select>
                                <div class="input-group-btn">
                                    <button type="button" v-on:click="gotoUid()" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">

                        <div class="style01">
                            <div class="col-xs-2">
                                序号
                            </div>
                            <div class="col-xs-2">
                               层级
                            </div>
                            <div class="col-xs-2">
                                手机
                            </div>
                            <div class="col-xs-2">
                                姓名
                            </div>
                            <div class="col-xs-2">
                                余额/积分
                            </div>
                            <div class="col-xs-2">
                                操作
                            </div>
                        </div>
                        <div class="style01" v-for="(vo,index) in list">
                            <div class="col-xs-2">
                                {{vo.cid}}
                            </div>
                            <div class="col-xs-2">
                               A
                            </div>
                            <div class="col-xs-2">
                                {{vo.mobile}}
                            </div>
                            <div class="col-xs-2">
                                {{vo.name}}
                            </div>
                            <div class="col-xs-2">
                                ￥{{vo.money}}/{{vo.point}}
                            </div>
                            <div class="col-xs-2">
                                <button type="button" v-on:click="Bchild(vo,index)" class="btn btn-sm btn-default">查看下级</button>
                            </div>

                            <div class="style02 col-xs-11 col-xs-offset-1" v-for="vo1 in vo.Bchild">
                                <div class="col-xs-2">
                                    └ {{vo1.cid}}
                                </div>
                                <div class="col-xs-2">
                                   B
                                </div>
                                <div class="col-xs-2">
                                    {{vo1.mobile}}
                                </div>
                                <div class="col-xs-2">
                                    {{vo1.name}}
                                </div>
                                <div class="col-xs-2">
                                    ￥{{vo1.money}}/{{vo1.point}}
                                </div>
                                <div class="col-xs-2">
                                    
                                </div>

                                <div class="style03 col-xs-11 col-xs-offset-1" v-for="vo2 in vo1.Cchild">
                                    <div class="col-xs-2">
                                        └ {{vo2.cid}}
                                    </div>
                                    <div class="col-xs-2">
                                       C
                                    </div>
                                    <div class="col-xs-2">
                                        {{vo2.mobile}}
                                    </div>
                                    <div class="col-xs-3">
                                        {{vo2.name}}
                                    </div>
                                    <div class="col-xs-2">
                                        ￥{{vo2.money}}/{{vo2.point}}
                                    </div>
                                    <div class="col-xs-1">
                                        
                                    </div>
                                    
                                </div>

                            </div>
                        </div>
                        
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer clearfix">
                        <ul class="pagination pagination-sm no-margin pull-right">
                            {$show}
                        </ul>
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <include file="Share:copyright" />
        <include file="Share:setting" />
    </div>
    <include file="Share:js" />
    <script type="text/javascript">
    $("#CustomerManager").addClass("active");
    $("#customer_crelation").addClass("active");

    // var searchchild = function(obj){
    //     $curTr = $(obj).parent().parent();
        
    //     $('')
    // }

        var HjVue = new Vue({
            el: '.content-wrapper',
            data: {
                list: [],
                uid: '{$Think.get.uid}',
                Loading : false
            },
            methods: {
                init: function(){
                    $.ajax({
                        type: "POST",
                        url: "/Admin//Customer/crelation/do/init",
                        headers: {},
                        data: {
                            uid: this.uid,
                            level: 'A'
                        },
                        dataType: "json",// html/json/jsonp/xml
                        success: function(msg){
                            HjVue.$data.list.push.apply(HjVue.$data.list,msg);
                        },
                        error: function(){
                            
                        }
                    });
                },
                Bchild:function(vo,index){
                    $.ajax({
                        type: "POST",
                        url: "/Admin//Customer/crelation/do/more",
                        headers: {},
                        data: {
                            uid: this.uid,
                            level: 'B',
                            cid: vo.cid
                        },
                        dataType: "json",// html/json/jsonp/xml
                        success: function(msg){

                            if(msg == null){
                                noty({
                                    text: '没有相关记录', 
                                    layout: "top", 
                                    timeout: 2000,
                                    type: 'warning'
                                });
                            }else{
                                noty({
                                    text: '更新成功', 
                                    layout: "top", 
                                    timeout: 1000,
                                    type: 'info'
                                });
                                vo['Bchild'] = msg;
                                Vue.set(HjVue.$data.list[index],vo);
                            }
                            
                        },
                        error: function(){
                            
                        }
                    });
                },
                gotoUid: function(){
                    window.location.href='/Admin//Customer/crelation/uid/'+this.uid;
                }
            }
        });

        HjVue.init();

    /* function deleteData($uid){
         if (confirm("确定删除?")){
             location.href = "/Customer/clist/cid/"+$uid+"/opt/delete";
         }
     }*/
    </script>
</body>

</html>
